<template>
  <div class="echarts h-full" :class="heightClass">
    <ECharts
      v-if="option"
      :option="option"
      :id="`line` + props.id"
      :showAllLabel="canRotate"
      ref="lineEChartsRef"
      :onClick="handleClick"
    />
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts/core";
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;
const emit = defineEmits(["handle-chart"]);
const props = defineProps({
  heightClass: {
    type: String,
    default: () => {
      return "";
    },
  },
  canRotate: {
    type: Boolean,
    default: true,
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  xUnit: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Array,
    default: () => {
      return [
        // yData: [5000, 2600, 1300, 1300, 1250, 1500],
        // xData: ["制造业", "建筑业", "农林牧渔", "房地产", "金融业", "居民服务"],
        // month: 12,
      ];
    },
  },
});
const { params, title, heightClass, canRotate, xUnit } = toRefs(props);
const option = ref({});

function handleClick(param: any) {
  emit("handle-chart", param);
}

const colorList = [
  "#006DFB",
  "rgb(25,238,255)",
  "#07e5ae",
  "#eed862",
  // "#B4EC51",
  "#7d5fff",
  "#FFBC6D",
  "#51D9A2",
  "#f9e264",
  "#f47a75",
  "grey",
  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    {
      offset: 0,
      color: "#04B9BD",
    },
    {
      offset: 1,
      color: "#76F2F8",
    },
  ]),
  "#765025",
];

watch(
  () => params.value,
  (newValue) => {
    // console.log("newValue", newValue);
    const list: any = {
      //   animation: true, //控制动画示否开启
      //   animationDuration: 3000,
      legend: {
        // bottom: "center",
        // bottom: 12,
        right: "center",
        bottom: "3%",
        textStyle: {
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: isDarkMode(routeName) ? 13 : 12,
        },
      },
      title: {
        text: title.value,
        x: "center",
        top: 5,
        textStyle: {
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: 14,
        },
      },
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(0,0,0,.5)",
        borderColor: "transparent",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "rgba(0,0,0,.5)",
            fontFamily: "DINLight",
          },
        },
        textStyle: {
          color: "#fff",
          fontFamily: "DINLight",
          fontSize: 14,
        },
        formatter: (params: any) => {
          // var relVal = props.params.month + "月" + params[0].name + "日";
          // for (var i = 0, l = params.length; i < l; i++) {
          //   relVal +=
          //     "<br/>" +
          //     params[i].seriesName +
          //     " " +
          //     params[i].marker +
          //     " " +
          //     params[i].value;
          // }
          // return relVal;
          var relVal = params[0].name + xUnit.value;
          for (var i = 0, l = params.length; i < l; i++) {
            relVal +=
              "<br/>" +
              params[i].marker +
              " " +
              params[i].seriesName +
              " " +
              (params[i]?.value || "-");
          }
          return relVal;
        },
      },
      grid: {
        top: "12%",
        right: "4%",
        left: "4%",
        bottom: title.value ? "15%" : "9%",
        containLabel: true,
      },
      xAxis: [
        {
          name: "",
          data: newValue[0]?.xdata ?? [],
          axisLine: {
            lineStyle: {
              color: "#cdd5e2",
            },
          },
          axisLabel: {
            color: isDarkMode(routeName) ? "#eeeeee" : "#666",
            fontSize: isDarkMode(routeName) ? 13 : 12,
            interval: 0,
            // 使用 formatter 函数添加后缀
            formatter: function (value) {
              return xUnit.value ? value + xUnit.value : value; // 这里的 '单位' 是你想要添加的后缀
            },
          },
          axisTick: {
            show: true,
          },
        },
      ],
      yAxis: [
        {
          name: "",
          nameTextStyle: {
            color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          },
          axisLabel: {
            formatter: "{value}",
            color: isDarkMode(routeName) ? "#eeeeee" : "#666",
            fontSize: 12,
          },
          splitLine: {
            lineStyle: {
              color: isDarkMode(routeName)
                ? "rgba(255,255,255,.1)"
                : "rgba(0,0,0,.12)",
              type: "dashed",
            },
          },
        },
      ],
      series: [],
    };

    newValue?.map((e: any, index) => {
      list.series.push({
        name: e.name ?? "",
        type: "bar",
        data: e.ydata ?? [],
        // barWidth: "20px",
        barMaxWidth: "70px",
        itemStyle: {
          color: colorList[index],
        },
        label: {
          show: true,
          fontSize: isDarkMode(routeName) ? 13 : 12,
        },
      });
    });

    option.value = list;
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: calc(100% - 50px);
  border-radius: 6px;
  //   box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
}
</style>
